<template>
	<view class="order-confirmation">
		<view class="countdown">
			<text>请在 {{ formatTime(countdown) }} 内完成支付</text>
		</view>
		<!-- 订单信息部分 -->
		<view class="order-info">
			<view class="order-info-item">
				<text class="order-label">订单编号:</text>
				<text class="order-value">{{ orderInfo.id }}</text>
			</view>
			<view class="order-info-item">
				<text class="order-label">创建时间:</text>
				<text class="order-value">{{ formatDate(orderInfo.createdAt) }}</text>
			</view>
		</view>
		<view class="address-info" @click="openAddressPanel">
			<view class="user-info">
				<text class="name">{{ orderInfo.userName }}</text>
				<text class="phone">{{ orderInfo.userPhone }}</text>
			</view>
			<view class="address">
				<uni-icons type="location" size="16" color="#999"></uni-icons>
				<text>{{ orderInfo.userAddress }}</text>
			</view>
		</view>
		<view class="product-list">
			<view v-for="(product, index) in orderInfo.products" :key="index" class="product-item">
				<image :src="loadUrl + product.image" mode="aspectFill" class="product-image"></image>
				<view class="product-info">
					<view class="product-name">{{ product.title }}</view>
					<view class="product-spec">{{ product.spec ? product.spec : '无规格' }}</view>
					<view class="product-price-qty">
						<text class="product-price">¥{{ (product.price / 100).toFixed(2) }}</text>
						<view class="qty-control">
							<text class="qty-btn" @click="changeQuantity(index, -1)">-</text>
							<text class="qty">{{ product.number }}</text>
							<text class="qty-btn" @click="changeQuantity(index, 1)">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="delivery-method">
			<text>配送方式</text>
			<text class="delivery-type">{{ orderInfo.deliveryMethod }}</text>
		</view>
		<view class="coupon-info">
			<uni-icons type="gift" size="16" color="#FF6600"></uni-icons>
			<text>{{ orderInfo.couponInfo }}</text>
		</view>
		<view class="order-note">
			<text>订单备注</text>
			<input type="text" v-model="orderInfo.note" placeholder="填写备注信息" placeholder-style="color: #999;"
				class="note-input" />
		</view>
		<view class="total-amount">
			<text>合计：</text>
			<text class="amount">¥{{ calculateTotal() / 100 }}</text>
		</view>
		<view class="submit-btn">
			<button type="warn" @click="submitOrder">立即付款</button>
		</view>
		<!-- 弹出层组件 -->
		<uni-popup ref="addressPopup" type="bottom">
			<AddressPanel :selectedAddressObj="orderInfo.userAddress" @selectAddress="updateAddress"
				@close="closeAddressPanel" />
		</uni-popup>
	</view>
</template>

<script>
	import AddressPanel from './AddressPanel.vue';
	export default {
		components: {
			AddressPanel,
		},
		data() {
			return {
				loadUrl: this.$loadUrl,
				countdown: 15 * 60,
				timer: null,
				orderInfo: {
					id: '', // 订单编号
					createdAt: '', // 订单创建时间
					userName: '请选择地址',
					userPhone: '',
					userAddress: '',
					products: [], // 商品列表将从后端数据中填充
					deliveryMethod: '顺丰包邮',
					couponInfo: '每1000积分，可抵扣10元',
					note: '',
					addressId: 0, // 收货地址ID
					orderId: 0, // 订单ID
					paymentType: 0 // 支付类型，默认为0
				}
			}
		},
		methods: {
			getOrderDetails(orderId) {
				// 请求订单详情
				this.$service({
					url: `/orders/unpaid/${orderId}`,
					method: 'GET'
				}).then(res => {
					if (res.code === 0) {
						const orderData = res.data;
						this.orderInfo.id = orderData.id;
						this.orderInfo.createdAt = orderData.createdAt;
						this.orderInfo.products = orderData.items.map(item => ({
							title: item.title,
							spec: item.spec,
							price: item.price,
							number: item.number,
							image: item.image,
						}));
					}
				});
			},
			openAddressPanel() {
				this.$refs.addressPopup.open();
			},
			closeAddressPanel(address) {
				console.log(13)
				console.log(address)
				this.orderInfo.addressId = address.id
				this.orderInfo.userName = address.contact
				this.orderInfo.userPhone = address.mobile
				this.orderInfo.userAddress = address.province + address.city + address.town + address.street
				this.$refs.addressPopup.close();
			},
			updateAddress(address) {
				this.orderInfo.userName = address.name;
				this.orderInfo.userPhone = address.phone;
				this.orderInfo.userAddress = address.address;
				this.closeAddressPanel();
			},
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60)
				const remainingSeconds = seconds % 60
				return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
			},
			formatDate(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			changeQuantity(index, change) {
				const newQuantity = this.orderInfo.products[index].number + change
				if (newQuantity > 0) {
					this.orderInfo.products[index].number = newQuantity
				}
			},
			calculateTotal() {
				return this.orderInfo.products.reduce((total, product) => {
					return total + product.price * product.number
				}, 0).toFixed(2)
			},
			submitOrder() {
				// 提交支付订单
				const paymentData = {
					addressId: this.orderInfo.addressId,
					orderId: this.orderInfo.id,
					paymentType: this.orderInfo.paymentType
				};
				console.log(113)
				console.log(paymentData)
				this.$service({
					url: `/orders/pay`,
					method: 'POST',
					data: paymentData,
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '付款成功',
							duration: 2000
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/shoppingcars/shoppingcars'
							});
						}, 2000);
					} else {
						uni.showToast({
							title: res.message || '付款失败',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			}
		},
		mounted() {
			this.timer = setInterval(() => {
				if (this.countdown > 0) {
					this.countdown--
				} else {
					clearInterval(this.timer)
					// 处理倒计时结束的逻辑
				}
			}, 1000)
			uni.$once('orderId', (id) => {
				console.log(id)
				this.getOrderDetails(id)
			})
		},
		beforeDestroy() {
			clearInterval(this.timer) // 确保组件销毁时清除定时器
		}
	}
</script>

<style scoped>
	.order-info {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.order-info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.order-label {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.order-value {
		font-size: 28rpx;
		color: #666;
	}

	.order-confirmation {
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.address-info {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.name,
	.phone {
		font-size: 28rpx;
		font-weight: bold;
	}

	.address {
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		color: #666;
	}

	.address text {
		margin-left: 10rpx;
	}

	.product-list {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.product-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.product-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.product-spec {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.product-price-qty {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		color: #ff6600;
		font-size: 32rpx;
		font-weight: bold;
	}

	.qty-control {
		display: flex;
		align-items: center;
	}

	.qty-btn {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #f0f0f0;
		color: #333;
	}

	.qty {
		margin: 0 20rpx;
		font-size: 28rpx;
	}

	.delivery-method,
	.coupon-info,
	.order-note {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.note-input {
		flex: 1;
		margin-left: 20rpx;
		padding: 10rpx;
		font-size: 28rpx;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
	}

	.order-note input {
		width: 70%;
		text-align: right;
	}

	.delivery-type {
		color: #999;
	}

	.coupon-info {
		color: #ff6600;
	}

	.order-note input {
		text-align: right;
		width: 70%;
	}

	.total-amount {
		text-align: right;
		padding: 20rpx;
		font-size: 32rpx;
	}

	.amount {
		color: #ff6600;
		font-weight: bold;
	}

	.submit-btn {
		padding: 20rpx;
	}

	.submit-btn button {
		width: 100%;
	}

	.order-confirmation {
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.countdown {
		background-color: #FFF0F0;
		color: #FF6600;
		text-align: center;
		padding: 10rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
</style>